new Vue({
    el: "#mainContent",
    data: {
        name: '',
        firstMenuList: [],//一级菜单
        secondMenuList: [],//二级菜单
        hotVideoList: [],//最热视频
        newVideoList: [],//最新视频
        //FIXME 待合并
        getFirstMenuList: "/index/get_first_menu.ajax",
        getSecondMenuList: "/index/get_second_menu.ajax",
        getHotVideoList: "/index/get_hot_video.ajax",
        getNewVideoList: "/index/get_new_video.ajax",
        listUrl: "/video/list",
        showSecondMenu: false,
        videoDetailUrl: "/video/detail",
        cardIndexUrl: "/card/index"
    },
    mounted: function () {
        this.name = $("#nameUser").val();
        this.initPage();
    },
    methods: {
        //初始化页面
        initPage: function () {
            //1.加载一级菜单
            this.$http.get(this.getFirstMenuList)
                .then((response) => {
                    this.$set(this, "firstMenuList", response.data.data);
                })
                .catch(function (response) {
                    console.log(response)
                });
            //2.加载最热视频列表
            this.$http.get(this.getHotVideoList)
                .then((response) => {
                    this.$set(this, "hotVideoList", response.data.data);
                })
                .catch(function (response) {
                    console.log(response)
                });
            //3.加载最新视频列表
            this.$http.get(this.getNewVideoList)
                .then((response) => {
                    this.$set(this, "newVideoList", response.data.data);
                })
                .catch(function (response) {
                    console.log(response)
                });
        },
        //展示二级菜单
        showMenu: function (event, fMenu) {
            console.log("fMenu:" + fMenu.typeId);
            this.showSecondMenu = true;
            //加载二级菜单内容
            this.$http.post(this.getSecondMenuList, {firstMenuId: fMenu.typeId}, {emulateJSON: true})
                .then((response) => {
                    console.log(JSON.stringify(response.data));
                    this.$set(this, "secondMenuList", response.data.data);
                })
                .catch(function (response) {
                    console.log(response)
                });
        },
        hideMenu: function () {
            this.showSecondMenu = false;
        },
        jumpToList: function (event, sMenu) {
            window.location.href = this.listUrl + "?secondMenuId=" + sMenu.typeId + "&firstMenuId=" + sMenu.typeParentId;
        },
        login: function () {
            layer.open({
                type: 2,
                title: '',
                fix: false,
                maxmin: true,
                shadeClose: true,
                area: ['400px', '300px'],
                content: '/login/login',
            });
        },
        register: function () {
            layer.open({
                type: 2,
                title: '',
                fix: false,
                area: ['400px', '300px'],
                content: '/login/login',
                close: function (index) {
                    layer.close(index);
                },
                end: function () {
                    window.location.href = "/index/index";
                }
            })
        },
        jumpToDetail: function (video) {
            window.location.href = this.videoDetailUrl + "?videoId=" + video.videoId;
        },
        jumpToCard: function () {
            window.location.href = this.cardIndexUrl;
        }
    }
});